<template>
  <el-card
    shadow="never"
    body-style="padding: 20px;"
    class="type-info"
    style="height: 270px"
  >
    <ul v-if="assetType === 'web'">
      <li>
        <p class="type-name">域名地址:</p>
        <p>{{ assetTypeInfo.key }}</p>
      </li>
      <li>
        <p class="type-name">开发语言:</p>
        <p>{{ assetTypeInfo.language.name }}</p>
      </li>
      <li>
        <p class="type-name">中间件:</p>
        <p>{{ assetTypeInfo.middleware }}</p>
      </li>
      <li>
        <p class="type-name">中间件版本:</p>
        <p>{{ assetTypeInfo.middleware_version }}</p>
      </li>
      <li>
        <p class="type-name">开发框架:</p>
        <p>{{ assetTypeInfo.web_framwork }}</p>
      </li>
      <li>
        <p class="type-name">框架版本:</p>
        <p>{{ assetTypeInfo.web_framwork_version }}</p>
      </li>
      <li>
        <p class="type-name">更新时间:</p>
        <p>{{ assetTypeInfo.update_time | toDateString }}</p>
      </li>
    </ul>
    <ul v-if="assetType === 'os'" style="height:210px">
      <li>
        <p class="type-name">IP地址:</p>
        <p>{{ assetTypeInfo.key }}</p>
      </li>
      <li>
        <p class="type-name">主机名:</p>
        <p>{{ assetTypeInfo.hostname }}</p>
      </li>
      <li>
        <p class="type-name">操作系统:</p>
        <p>{{ assetTypeInfo.os }}</p>
      </li>
      <li>
        <p class="type-name">更新时间:</p>
        <p>{{ assetTypeInfo.update_time | toDateString }}</p>
      </li>
    </ul>
    <span class="type-edit" @click="editTypeInfo">编辑>></span>
    <type-model :item-type="assetType" :type-info="assetTypeInfo" :is-show="isShow" @close="handleClose" />
  </el-card>
</template>

<script>
import typeItem from './typeItem'
import typeModel from '../components/typeModel'
export default {
  name: 'AssetTypeInfo',
  components: {
    typeModel
  },
  data() {
    return {
      isShow: false,
      editForm: {},
      editRules: {},
      editLoading: false
    }
  },
  computed: {
    assetType() {
      return this.$store.state.asset.type
    },
    assetTypeInfo() {
      console.log(this.$store.state.asset.typeInfo)
      return this.$store.state.asset.typeInfo
    },
    typeItem() {
      return typeItem[this.assetType]
    }
  },
  methods: {
    editTypeInfo() {
      this.isShow = true
    },
    handleClose() {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.type-info {
  li {
    display: block;
    height: 25px;
    p {
      display: inline-block;
    }
  }
}
.type-name {
  width: 100px;
}
.type-edit {
  position:absolute;
  color: #57a2ff;
  cursor: pointer;
  right: 50px;
  top: 200px;
}
.tab-content {
  padding: 10px;
}
</style>
